import {useTodolistStoreContext} from '../../store'
import { useRef } from 'react'
import {observer} from 'mobx-react'
const  Item = observer((props) => {
    const {datasourse: data} = props

    const store = useTodolistStoreContext()

    const inputRef = useRef()

    const {
        checkboxCliclCallback: checkboxCliclCallbackAction
    } = store

    const checkboxCliclCallback = () => checkboxCliclCallbackAction(data.id, inputRef.current.checked)

    return (
        <li>
            <label>
                <input type="checkbox" ref={inputRef} checked={data.isCompleted} onChange={checkboxCliclCallback}/>
                <span>{data.todo}</span>
            </label>
            <button className="btn btn-danger">删除</button>
        </li>
    );
})

export default Item